<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 用户管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!--<el-button @click='toAdd' type="primary" v-if="$_has('user:add')" size="mini" style="float: right">添加用户</el-button>-->
                <!--<el-button @click='batchDelete'      type="primary" icon="el-icon-delete" class="handle-del mr10" v-if="$_has('user:batchDelete')" size="mini"  style="float: right">删除</el-button>-->
                <el-input v-model="username" clearable size="mini" style="width: 80px"    class="handle-select mr10" placeholder="账号" ></el-input>
                <el-input v-model="nickname" clearable size="mini" style="width: 80px"   placeholder="姓名"  class="handle-select mr10"></el-input>
                <el-select
                        class="handle-select mr10"
                        size="mini"
                        v-model="gender"
                        placeholder="性别 "
                        clearable
                >
                    <el-option
                            v-for="item in  genderArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-bottom: 10px;">

                <el-select
                        class="handle-select mr10"
                        size="mini"
                        v-model="post"
                        placeholder="职位"
                        clearable
                >
                    <el-option
                            v-for="item in  postArr"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                        class="handle-select mr10"
                        size="mini"
                        v-model="department"
                        placeholder="部门"
                        clearable
                ><el-option
                        v-for="item in  departmentArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索</el-button>
            </div>
            <el-button @click='toAdd' type="primary" v-if="$_has('user:add')" size="mini" style="margin-bottom: 10px;" >添加用户</el-button>
            <el-button @click='batchDelete'      type="primary" icon="el-icon-delete" class="handle-del mr10" v-if="$_has('user:batchDelete')" size="mini"  >删除</el-button>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="40" ></el-table-column>
                <el-table-column prop="username" label="帐号"   align="center" width="120px" >
                </el-table-column>
                <el-table-column prop="nickname" label="昵称"  align="center" width="120px">
                </el-table-column>
                <el-table-column prop="department" label="部门" show-overflow-tooltip align="center" width="250px">
                    <template slot-scope="scope">
                        <span  v-for="(item,index) in departmentArr" v-if="scope.row.department == item.value"  >{{item.label}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="post" label="岗位" align="center" width="80px">
                    <template slot-scope="scope">
                        <span  v-for="(item,index) in postArr" v-if="scope.row.post == item.value"  >{{item.label}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机" align="center"  width="180px"
                ></el-table-column>
                <el-table-column prop="email" label="邮箱" show-overflow-tooltip  align="center" width="200px">
                </el-table-column>
                <el-table-column prop="gender" label="性别" align="center" width="80px">
                    <template slot-scope="scope">
                        <span  v-for="(item,index) in genderArr" v-if="scope.row.gender == item.value"  >{{item.label}} </span>
                    </template>
                </el-table-column>
                <el-table-column prop="regIp" label="登录Ip" align="center" width="170px">
                </el-table-column>
                <el-table-column prop="lastLoginTime" label="上次登录时间" width="170" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="60px" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 0" style="color: red">禁用 </span>
                        <span v-if="scope.row.status == 1" >启用</span>
                           </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="250px">

                    <template slot-scope="scope">
                        <el-button size="mini"   type="text" v-if="$_has('user:edit')" @click="changeUser(scope.$index, scope.row)"   icon="el-icon-edit">修改</el-button>
                        <el-button size="mini"   style="margin-left: 15px"   type="text" v-if="$_has('user:reset')"  @click="toReset(scope.$index, scope.row)"  icon="el-icon-refresh-right">重置密码</el-button>
                        <el-button size="mini"     style="margin-left:15px"   type="text" v-if="$_has('user:allotRole')" @click="distribute(scope.$index, scope.row)">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        @current-change="handleCurrentChange" :page-size="10" :pager-count="11" layout="prev, pager, next" :current-page="pageCount" :total="total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="分配角色" :visible.sync="distributeVisible" width="30%" :append-to-body='true' style="text-align: center">
            <!--表单内容-->
            <el-form ref="form"  :hide-required-asterisk='true'>
                <el-form-item>
                    <el-select
                            multiple
                            class="size-full"
                            v-model="roleIds"
                            placeholder="请选择"
                            clearable
                            style="width:60%"
                    >
                        <el-option
                                v-for="item in roleArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class='deviceManage-el-form-item information-el-form-item'>
                    <el-button type="primary" @click="toDistribute">确定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
        <!--<el-dialog title="提示" :visible.sync="initialize" width="300px" class="dialog" center :append-to-body='true'>-->
        <!--<div class="del-dialog-cnt">初始化密码</div>-->
        <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="initialize = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="initializeRow">确 定</el-button>-->
        <!--</span>-->
        <!--</el-dialog>-->
        <!--分页-->
<!--        <el-pagination @current-change="handleCurrentChange" :page-size="10" :pager-count="11" layout="prev, pager, next" :current-page="pageCount" :total="total">-->
<!--        </el-pagination>-->

        <!--对话框-->
        <el-dialog title="添加用户" :visible.sync="dialogVisible" width="500px" :append-to-body='true'>
            <!--表单内容-->
            <el-form ref="form" :model="form" label-width="70px" :rules='rules' :hide-required-asterisk='true'>
                <el-form-item label="用户名" prop='username' >
                    <el-input v-model="form.username" clearable size="mini" style="width: 300px"    class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop='username'>
                    <el-input v-model="form.nickname" clearable size="mini" style="width: 300px"    class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop='password'>
                    <el-input v-model="form.password" :type="pasType" autoComplete="on" clearable size="mini" style="width: 300px"   class="handle-select mr10">
                        <i slot="suffix" :class="icon" @click="showPass" ></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="手机" prop='mobile'>
                    <el-input v-model="form.mobile" clearable size="mini" style="width: 300px"   class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop='email'>
                    <el-input v-model="form.email" clearable size="mini" style="width: 300px"   class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop='department'>
                    <el-select
                            class="handle-select mr10"
                            size="mini"
                            v-model="form.department"
                            placeholder="部门 "
                            style="width: 300px"
                            clearable
                    >
                        <el-option
                                v-for="item in  departmentArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="职位" prop='post'>
                    <el-select
                            class="handle-select mr10"
                            size="mini"
                            v-model="form.post"
                            placeholder="职位 "
                            clearable
                            style="width: 300px"
                    >
                        <el-option
                                v-for="item in  postArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop='gender'>
                    <el-select
                            class="handle-select mr10"
                            size="mini"
                            v-model="form.gender"
                            placeholder="性别 "
                            clearable
                            style="width: 300px"
                    >
                        <el-option
                                v-for="item in  genderArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="qq" prop='qq'>
                    <el-input v-model="form.qq" clearable size="mini" style="width: 300px"    class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item class='deviceManage-el-form-item information-el-form-item'>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="ChangeVisible" width="500px" :append-to-body='true'>
            <!--表单内容-->
            <el-form ref="form2" :model="form2" label-width="70px" :rules='rules2' :hide-required-asterisk='true'>
                <el-form-item label="昵称" prop='username'>
                    <el-input v-model="form2.nickname" clearable size="mini" style="width: 300px"    class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop='mobile'>
                    <el-input v-model="form2.mobile" clearable size="mini" style="width: 300px"    class="handle-select mr10" ></el-input>
                </el-form-item>

                <el-form-item label="职位" prop='post'>
                    <el-select
                            class="handle-select mr10"
                            size="mini"
                            v-model="form2.post"
                            placeholder="职位 "
                            clearable
                            style="width: 300px"
                    >
                        <el-option
                                v-for="item in  postArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop='gender'>
                    <el-select
                            class="handle-select mr10"
                            size="mini"
                            v-model="form2.gender"
                            placeholder="性别 "
                            clearable
                            style="width: 300px"
                    >
                        <el-option
                                v-for="item in  genderArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" prop='email'>
                    <el-input v-model="form2.email" clearable size="mini" style="width: 300px"   class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop='department'>
                    <el-select
                            class="handle-select mr10"
                            size="mini"
                            v-model="form2.department"
                            placeholder="部门 "
                            style="width: 300px"
                            clearable
                    >
                        <el-option
                                v-for="item in  departmentArr"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="qq" prop='qq'>
                    <el-input v-model="form2.qq" clearable size="mini" style="width: 300px"   class="handle-select mr10"></el-input>
                </el-form-item>
                <el-form-item class='deviceManage-el-form-item information-el-form-item'>
                    <el-button type="primary" @click="Change">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</template>

<script>
    import getData from '../../../getData/api.js'
    import { mapState,mapGetters,mapActions  } from 'vuex'
    export default {
        data() {
            return {
                nickname:"",
                username:"",
                department:"",
                departmentArr:[],
                post:"",
                gender:"",
                genderArr:[],
                postArr:[],
                distributeVisible:false,//分配角色的框
                roleArr:[],//分配角色用的数组
                tableData:[],//表格数据
                pageCount:1,//页数
                total:1,
                userId:'',//用户id。分配角色用
                roleIds:[],//分配角色选中的数组
                pasType:'password',
                icon:"el-input__icon el-icon-view",
                delVisible:false,
                ChangeVisible:false,
                currentPage4: 4,
                initialize:false,
                cur_page:1,//当前页数
                id:'',
                dialogVisible: false,
                form: {//添加的对象
                    username: '',//用户名
                    password: '',//密码
                    mobile: '',//手机
                    email:'',//邮箱
                    post: '',//职位
                    department: '',//部门
                    qq: '',//qq
                    gender:'',//性别
                    nickname:''
                },
                form2:{//修改的对象
                    mobile:'',//手机
                    email:'',//邮箱
                    post: '',//职位
                    department: '',//部门
                    qq: '',//qq
                    gender:'',//性别
                    nickname:'',
                },
                rules: {
                    username: [{
                        required: true,
                        message: '用户名不能为空',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],
                    mobile:[{
                        required: true,
                        message: '手机不能为空',
                        trigger: 'blur'
                    }],
                    post:[{
                        required: true,
                        message: '职位不能为空',
                        trigger: 'blur'
                    }],
                    department:[{
                        required: true,
                        message: '部门不能为空',
                        trigger: 'blur'
                    }],

                }, //表单验证规则
                rules2: {
                    email:[

                        {
                            pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                            message: '邮箱格式错误',
                            trigger: 'blur'
                        }
                    ],
                    mobile:[{
                        required: true,
                        message: '手机不能为空',
                        trigger: 'blur'
                    }],
                    post:[{
                        required: true,
                        message: '职位不能为空',
                        trigger: 'blur'
                    }],
                    department:[{
                        required: true,
                        message: '部门不能为空',
                        trigger: 'blur'
                    }],
                }, //表单验证规则
                multipleSelection:[],
            }
        },
        computed: {
        },
        methods: {
            //批量
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //批量删除
            batchDelete(){
                this.$confirm('确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids=[];
                    Object.keys(this.multipleSelection).forEach((key) => {
                       ids.push(this.multipleSelection[key].id)
                    });
                    let params = {
                        "ids": ids,
                    };
                    let formData = new FormData();
                    Object.keys(params).forEach((key) => {
                        formData.append(key, params[key]);
                    });//转form-data
                    getData.userRemove(formData)
                        .then(res => {
                            this.search()
                            if (res.status == 200) {

                                this.$message.success(res.message)
                            }
                        })
                })
            },
            distribute(index,row){
                this.userId=row.id;
                this.distributeVisible=true
                // for(let a=0;a<this.roleArr.length;a++){
                //     if (val == this.roleArr[a].value) {
                //         this.roleId = this.roleArr[a].value;
                //     }
                // }
            },
            //重置密码
            toReset(index,row){
                this.$confirm('确定重置?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        let params={
                            username: row.username
                        }
                        let formData = new FormData();
                        Object.keys(params).forEach((key) => {
                            formData.append(key, params[key]);
                        });//转form-data
                        getData.userReset(formData).then(res => {
                            if (res.status === 200) {
                                this.search()
                                this.$message({
                                    type: 'success',
                                    message: res.message || '重置成功'
                                })
                            } else {
                                this.$message.error(res.message || '重置失败')
                            }
                        })
                    })
                    .catch(() => {})
            },
            toDistribute(){
                let ids= this.roleIds.join(",")
                let params = {
                    "userId":this.userId,
                    "roleIds":ids,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.saveUserRoles(formData)
                    .then(res=>{
                        this.search()
                        this.distributeVisible=false
                        if (res.status==200){
                           this.$message.success(res.message)
                        }
                    })
            },
            showPass() {
                //点击图标是密码隐藏或显示
                if (this.pasType == "text") {
                    this.pasType = "password";
                    //更换图标
                    this.icon = "el-input__icon el-icon-view";
                } else {
                    this.pasType = "text";
                    this.icon = "el-input__icon el-icon-loading";
                }
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                //每次翻页都请求数据
                this.pageCount = val
               this.search()

            },
            //修改
            changeUser(index, row) {
                this.id=row.id
                this.form2=row;
                this.ChangeVisible=true;
            },
            Change(){
                this.$refs['form2'].validate((valid) => {
                    if(valid) {
                        let params = {
                            id:this.id,
                            mobile: this.form2.mobile,
                            email:this.form2.email,
                            post:this.form2.post,
                            department: this.form2.department,
                            qq: this.form2.qq,
                            gender:this.form2.gender,
                            nickname:this.form2.nickname
                        }
                        let formData = new FormData();
                        Object.keys(params).forEach((key) => {
                            formData.append(key, params[key]);
                        });//转form-data
                        getData.changeUserData(formData)
                            .then(() => {
                                this.search()
                                this.ChangeVisible = false;
                            })
                    } else {
                        return false;
                    }
                });
            },
            //添加用户
            toAdd() {
                this.dialogVisible = true;

            },
            deleteRow(){
                //用户id
                let params = {
                    "id" : this.id
                }
                this.DelAction(params)
                    .then(() => {
                        this.delVisible = false
                      this.search()
                    })

            },
            delUser(index, row) {
                this.id = row.id,
                    this.delVisible=true

            },
            //添加用户 表单提交
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        let params = {
                            username: this.form.username,
                            password:this.form.password,
                            mobile: this.form.mobile,
                            email:this.form.email,
                            post:this.form.post,
                            department: this.form.department,
                            qq: this.form.qq,
                            gender:this.form.gender,
                            nickname:this.form.nickname,
                        }
                        let formData = new FormData();
                        Object.keys(params).forEach((key) => {
                            formData.append(key, params[key]);
                        });//转form-data
                        getData.addUser(formData)
                            .then(() => {
                                this.search();
                                this.dialogVisible = false;
                            })
                    } else {
                        return false;
                    }
                });

            },
            search(){//请求List数据
                let params = {
                    "pageNum":this.cur_page,
                    "pageSize":10,
                    username:this.username,
                    nickname:this.nickname,
                    gender:this.gender,
                    post:this.post,
                    department:this.department,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                this.axios.post('/user/list', formData)
                    .then(res=>{
                        this.tableData=res.data.rows
                        this.total=res.data.total
                })
            },
            getRoleData(){
                console.log(this.roleArr)
                let params = {
                    "pageNumber":1,
                    "pageSize":99999,
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.roleList(formData)
                    .then(res=>{
                        console.log(res)
                        if (res.status==200){
                            for(let i =0 ;i<res.rows.length;i++){
                                let resData={};
                                resData.value=res.rows[i].id;
                                resData.label=res.rows[i].description;
                                this.roleArr.push(resData)
                            }
                        }
                       })
            },
            getDict1005(){//部门
                let params = {
                    typeCode:"1005"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.frameArr.push(resData)
                        }
                    })
            },
            getDict1005(){
                let params = {
                    typeCode:"1005"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        this.departmentArr=[];
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.departmentArr.push(resData)
                        }
                    })
            },
            getDict1004(){//职位
                let params = {
                    typeCode:"1004"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        this.postArr=[];
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.postArr.push(resData)
                        }
                    })
            },
            getDict1003(){//性别
                let params = {
                    typeCode:"1003"
                };
                let formData = new FormData();
                Object.keys(params).forEach((key) => {
                    formData.append(key, params[key]);
                });//转form-data
                getData.findByType(formData)
                    .then(res=>{
                        this.genderArr=[];
                        for(let i =0 ;i<res.data.length;i++) {
                            let resData = {}
                            resData.value=res.data[i].code;
                            resData.label=res.data[i].codeName;
                            this.genderArr.push(resData)
                        }
                    })
            },
        },
        mounted(){
            //请求数据
            this.search();
            this.getRoleData();
            this.getDict1003();
            this.getDict1004();
            this.getDict1005()
        }
    }
</script>

<style lang="less" scoped>
    @import '~assets/styles/main.css';
    /*搜索框*/
    .handle-box {
        margin-bottom: 10px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
<style>
    .el-table td, .el-table th{
        padding: 8px 0 !important;
    }
</style>
